<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景图片的重复模式 background-repeat</title>

        <style>
            /* background-repeat属性用来设置背景的重复模式
               repeat: x,y均平铺（默认）
               repeat-x：x平铺
               repeat-y：y平铺
               no-repeat：不平铺
            */
            div {
                width: 2000px;
                height: 1400px;
                border: 1px solid #000;
                margin-bottom: 50px;
                /* background-image: url(透明标识22.png); */

                /* background表示综合属性 可以同时调整背景颜色和背景图片 */
                background: yellow url(透明标识22.png);
            }

            .box1 {
                /* 默认 */
                background-repeat:repeat;
            }
            .box2 {
                background-repeat:repeat-x;
            }
            .box3 {
                background-repeat:repeat-y;
            }
            .box4 {
                background-repeat:no-repeat;
            }

            body {
                background-image: url(bj.png)
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </body>
</html>